<template>
  <transition :name="fade ? 'fade' : ''">
    <div v-if="!closed" :class="wrapClasses">
      <span :class="getClassName('icon')" v-if="showIcon">
        <slot name="icon">
          <Icon :type="iconType"></Icon>
        </slot>
      </span>
      <span :class="getClassName('message')">
        <div v-for="(item, index) in defaultContent" :key="index" :class="getClassName('line-space')">
          <component :is="item" />
        </div>
        <div v-if="hasCollapse" @click="onClickCollapsed" :class="getClassName('coll')">
          {{collapsed ? '展开更多' : '收起'}}
        </div>
      </span>
      <span :class="getClassName('desc')" v-if="desc"> 
        <slot name="desc"> </slot>
      </span>
      <a :class="getClassName('close')" v-if="closable" @click="close">
        <slot name="close">
          <Icon type="close"></Icon>
        </slot>
      </a>
    </div>
  </transition>
</template>

<script>
import Icon from '../icon'
import { oneOf } from '../../utils/assist'

const prefixCls = 'haloe-alert'
const outlineMap = {
  checked: 'passed',
  info: 'info-circle',
  warning: 'warning-circle',
  clear: 'close',
}
export default {
  name: 'Alert',
  components: { Icon },
  props: {
    type: {
      validator(value) {
        return oneOf(value, ['success', 'info', 'warning', 'error'])
      },
      default: 'info',
    },
    closable: {
      type: Boolean,
      default: false,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    banner: {
      type: Boolean,
      default: false,
    },
    fade: {
      type: Boolean,
      default: true,
    },
    maxLine: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      closed: false,
      desc: false,
      // 是否已收起，使用折叠功能时有效，用于表示是否已折叠；默认折叠
      collapsed: true,
      defaultContent: null,
      hasCollapse:null,
    }
  },
  computed: {
    wrapClasses() {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.type}`,
        {
          [`${prefixCls}-with-icon`]: this.showIcon,
          [`${prefixCls}-with-desc`]: this.desc,
          [`${prefixCls}-with-banner`]: this.banner,
        },
      ]
    },
    iconType() {
      let type = ''
      switch (this.type) {
      case 'success':
        // type = 'checked';
        type = 'check-circle-filled';
        break;
      case 'info':
        // type = 'info';
        type = 'info-circle-filled';
        break;
      case 'warning':
        // type = 'warning';
        type = 'warning-filled'
        break;
      case 'error':
        // type = 'clear';
        type = 'close-circle-filled'
        break;
      }
      // if (this.desc) type = outlineMap[type];
      if (this.desc) type = this.iconType;
      return type;
    }
  },
  methods: {
    close(e) {
      this.closed = true
      this.$emit('on-close', e)
    },
    onClickCollapsed() {
      this.collapsed = !this.collapsed
    },
    getClassName(name) {
      return `${prefixCls}-${name}`
    }
  },
  watch: {
    collapsed: {
      immediate:true,
      handler(newVal) {
        if (this.$slots.default) {
          this.defaultContent = this.$slots.default()

          this.hasCollapse = this.maxLine && this.defaultContent.length > this.maxLine

          if (this.hasCollapse && newVal) {
            this.defaultContent = this.defaultContent.slice(0, this.maxLine)
          }

        }
      }
    }
  },
  mounted() {
    this.desc = this.$slots.desc !== undefined;
  }
};
</script>
